<template>
    <view class="bg-content">
        <u-sticky>
            <div style="height: 43px; border-bottom: 1rpx solid #eeeeee; background-color: #FFFFFF;">
                <u-tabs :list="tabList" name="title" active-color="red" :is-scroll="false" :current="activeTabIndex" @change="onTabChange"></u-tabs>
            </div>
        </u-sticky>

        <view class="taobao" v-for="(item, index) of tbOrderCouponList" :key="item.id">
            <view class="title">
                <view class="left">
                    <!--<image class="buddha" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg"-->
                    <!--mode="aspectFill"></image>-->
                    <u-icon name="/pages/sub/sub1-tabs/static/icon/shop.png" size="40"></u-icon>
                    <view class="store">{{item.tbStore.name}}</view>
                </view>
                <view class="entrance" @click="navigateTo(`/pages/common/store/index?storeId=${item.storeId}`)">进店</view>
            </view>
            <view class="ticket">
                <view class="left">
                    <!--<image-->
                    <!--class="picture"-->
                    <!--src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578059523488&di=5f592ac19c1b983005d3e85add469756&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM00%2F2D%2FB9%2FwKhQs1QfUo6EdeM-AAAAALwk1hM072.jpg"-->
                    <!--mode="widthFix"-->
                    <!--&gt;</image>-->
                    <view class="introduce">
                        <view class="top">
                            ￥
                            <text class="big">{{item.couponMoney | toFixed2}}</text>
                            满{{item.orderMoney | toFixed2}}元减{{item.couponMoney | toFixed2}}元
                        </view>
                        <view class="type">店铺优惠券</view>
                        <view class="date u-line-1">{{item.startTime}}-{{item.endTime}}</view>
                    </view>
                </view>
                <view class="right">
                    <view class="use immediate-use" :round="true" v-if="item.status === '1'"
                          @click="navigateTo(`/pages/common/store/index?storeId=${item.storeId}`)">去使用
                    </view>
                    <view class="use immediate-use" :round="true" v-if="item.status === '2'" style="background-color: grey !important;">已使用</view>
                </view>

            </view>
        </view>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>
    </view>
</template>

<script>

    import {TbOrderCouponService} from "@/dev/services/tb-order-coupon.service";

    export default {
        data() {
            return {
                tbOrderCouponList: [],
                tabList: [
                    {title: '全部', status: null},
                    {title: '未使用', status: '1'},
                    {title: '已使用', status: '2'},
                    {title: '已失效', status: '3'},
                ],
                activeTabIndex: 0
            }
        },
        onLoad(options) {
            this.doRefresh(this.tbOrderCouponList);
        },
        watch: {
            activeTabIndex: {
                deep: true, // 深度监听
                handler(newVal, oldVal) {
                    console.log("activeTabIndex参数改变，即将刷新...", `新值：${newVal}`, `旧值：${oldVal}`);
                    this.doRefresh(this.tbOrderCouponList)
                }
            }
        },
        // 上拉加载
        onReachBottom: function () {
            if (this.pagination.hasNextPage) {
                this.doInfinite()
            }
        },
        methods: {
            onTabChange(index) {
                const _self = this;
                this.activeTabIndex = index;
                this.urlParams.activeTabIndex = this.activeTabIndex;
            },
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbOrderCouponService().findTableTbOrderCouponList({
                    pagination: _self.pagination,
                    data: {
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        userId: _self.globalVariable.userInfo.id,
                        status: _self.tabList[_self.activeTabIndex].status,
                        orderBy: 'create_time desc',
                    },
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbOrderCouponList = [..._self.tbOrderCouponList, ...result.list];
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
